<template>
  <div class="audit-task">
    <h2>跑腿任务审核</h2>

    <!-- 输入审核任务ID -->
    <div class="input-container">
      <label for="task-id">任务ID：</label>
      <input 
        type="text" 
        id="task-id" 
        v-model="taskId" 
        placeholder="请输入任务ID" 
      />
    </div>

    <!-- 输入审核状态 -->
    <div class="input-container">
      <label for="status">状态：</label>
      <select id="status" v-model="status">
        <option value="待审核">待审核</option>
        <option value="可接单">可接单</option>
        <option value="已接单">已接单</option>
        <option value="已完成">已完成</option>
        <option value="已取消">已取消</option>
        <option value="纠纷中">纠纷中</option>
      </select>
    </div>

    <!-- 提交按钮 -->
    <button @click="submitReview" class="submit-btn">提交审核</button>

    <!-- 提示信息 -->
    <div v-if="message" :class="messageClass" class="message">
      {{ message }}
    </div>
  </div>
</template>

<script>
// 引入审核接口函数
import { reviewTaskStatus } from '@/api/audittask';

export default {
  data() {
    return {
      taskId: '', // 存储任务ID
      status: '待审核', // 默认状态
      message: '', // 响应提示信息
      messageClass: '', // 提示信息的类名，用于控制样式
    };
  },
  methods: {
    // 提交审核操作
    async submitReview() {
  if (!this.taskId) {
    this.message = '任务ID不能为空';
    this.messageClass = 'error';
    return;
  }

  // 构建 JSON 数据
  const requestData = {
    task_id: this.taskId,  // 使用绑定的任务ID
    status: this.status,   // 使用绑定的状态
  };

  // 调用接口更新任务状态
  try {
    const response = await reviewTaskStatus(requestData);  // 将 JSON 数据传递给接口
    
    if (response.code === 200) {
      this.message = '任务审核成功！';
      this.messageClass = 'success';
    } else {
      this.message = '任务审核失败！';
      this.messageClass = 'error';
    }
  } catch (error) {
    this.message = '审核请求失败，请稍后重试。';
    this.messageClass = 'error';
  }
}

  },
};
</script>

<style scoped>
.audit-task {
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
}

.input-container {
  margin-bottom: 15px;
}

input, select {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

button.submit-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button.submit-btn:hover {
  background-color: #2980b9;
}

.message {
  margin-top: 20px;
  text-align: center;
}

.message.success {
  color: green;
}

.message.error {
  color: red;
}
</style>
